<template>
  <div class="recommendationCard">
    <div class="header">
      <div class="creatorInfo">
        <img :src="avatarUrl" alt="创建人头像" />
        <span>无畏的小博</span>
      </div>
      <div class="title">推荐</div>
    </div>
    <div class="content">
      推荐一个非常好用的笔记软件，功能强大且可以协同。wolai，这是官网：<a
        :href="websiteUrl"
        target="_blank"
        >官网链接</a
      >
    </div>
    <div class="footer">
      <div class="tags">
        <el-tag type="warning">笔记软件</el-tag>
        <el-tag type="warning">效率工具</el-tag>
      </div>
      <div class="actions">
        <el-icon><Star /></el-icon><span>1</span> <el-icon><ChatLineSquare /></el-icon
        ><span>2</span> <el-icon><Share /></el-icon><span>3</span>
      </div>
      <div class="expandButton">
        <el-icon><ArrowDownBold /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElTag, ElIcon } from 'element-plus'
import 'element-plus/dist/index.css'

const avatarUrl = ref('https://placekitten.com/50/50')
const websiteUrl = ref(
  'https://www.baidu.com/link?url=CwPU4Uc4RoEIBT8hT672XaTxEq2gk6t9v4JXXHEEHJW&wd=&eqid=def501b20008234d0000000664fcc1ee'
)
</script>

<style scoped>
.recommendationCard {
  background-color: #fff599;
  border-radius: 10px;
  width: 500px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creatorInfo {
  display: flex;
  align-items: center;
}

.creatorInfo img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
}

.creatorInfo span {
  font-size: 14px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #ffcc00;
}

.content {
  background-color: #ffeb99;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tags {
  display: flex;
  gap: 10px;
}

.actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.actions span {
  margin-left: 5px;
  font-size: 14px;
}

.expandButton {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
